<template>
    <div class="storeInfo">
        <div class="head">
            <el-form :model="form" class="headForm">
                
                <el-form-item label="" style="width:105px">
                <el-select v-model="form.category_id" placeholder="套餐分类">
                    <el-option label="套餐分类" value=""></el-option>
                    <el-option v-for="(item,catI) in categoryList" :key="catI" :label="item.cate_name" :value="item.category_id" ></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-select v-model="form.has_time" placeholder="房时">
                    <el-option label="房时" value=""></el-option>
                    <el-option label="不包含房时" value="0"></el-option>
                    <el-option label="包含房时" value="1"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-select v-model="form.combo_kind" placeholder="适用场景">
                    <el-option label="适用场景" value=""></el-option>
                    <el-option label="通用" value="0"></el-option>
                    <el-option label="KTV包房" value="1"></el-option>
                    <el-option label="卡座酒吧" value="2"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-select v-model="form.combo_type" placeholder="平台属性">
                    <el-option label="平台属性" value=""></el-option>
                    <el-option label="魅KTV" value="0"></el-option>
                    <el-option label="美团团购" value="1"></el-option>
                    <el-option label="美团预订" value="2"></el-option>
                    <el-option label="口碑团购" value="3"></el-option>
                    <el-option label="口碑预订" value="4"></el-option>
                </el-select>
                </el-form-item>


                <el-form-item label="" style="width:105px">
                <el-select v-model="form.combo_cate" placeholder="套餐级别">
                    <el-option label="套餐级别" value=""></el-option>
                    <el-option label="L1" value="1"></el-option>
                    <el-option label="L2" value="2"></el-option>
                    <el-option label="L3" value="3"></el-option>
                </el-select>
                </el-form-item>




                <el-form-item label="" style="width:105px">
                <el-input v-model="form.name" placeholder="套餐名称"></el-input>
                </el-form-item>


                <el-form-item label="" style="width:105px">
                <el-input v-model="form.desc" placeholder="套餐描述"></el-input>
                </el-form-item>



                 <el-form-item label="" style="width:105px">
                <el-select v-model="form.status" placeholder="上下架">
                    <el-option label="上下架" value=""></el-option>
                    <el-option value="0" label="上架"></el-option>
                    <el-option value="1" label="下架"></el-option>
                </el-select>
                </el-form-item>

                
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="danger" @click="add">添加</el-button>


            </el-form>
            
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer" v-if="tableData.length != 0">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- <el-table-column :prop="item.bar" :label="item.name" fixed v-for="(item,index) in tabBar" :key="index">
                    <img :src="item.bar" alt="" v-if="item.name == '封面'">
                </el-table-column> -->

                <el-table-column prop="combo_id" label="ID" fixed></el-table-column>
                <el-table-column prop="cover_image" label="封面">
                    <template   slot-scope="scope">            
                        <img :src="scope.row.combo_images[0]+'?x-oss-process=image/resize,m_fill,w_60,h_50/quality,q_50'"  min-width="60" height="50" :onerror="defunltImg"/>
                    </template>   
                </el-table-column>
                <el-table-column prop="combo_name" label="套餐名称" width="200"></el-table-column>
                <el-table-column prop="has_time_cn" label="房时套餐"></el-table-column>
                <el-table-column prop="category_name" label="分类"></el-table-column>
                <el-table-column prop="platform_cn" label="平台属性">
                    <template slot-scope="scope">
                        <p v-html='scope.row.platform_cn'></p>
                    </template>
                </el-table-column>
                <el-table-column prop="combo_desc_cn" label="套餐明细" width="200">
                    <template slot-scope="scope">
                        <div v-html='scope.row.combo_desc_cn'></div>
                    </template>
                </el-table-column>

                <el-table-column prop="grade" label="消费能力"></el-table-column>
                <el-table-column prop="update_time" label="更新时间"></el-table-column>
                <el-table-column prop="combo_cate_cn" label="级别" ></el-table-column>
                <el-table-column  label="操作" prop="combo_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(scope.row.combo_id,item.url)">                           
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <!-- 美团授权弹框 -->
       
    </div>
</template>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
// import {draggable} from 'vuedraggable';
import upload from '../../pop/upload.vue';
var url= potUrl.defaultComboList
export default {
    components:{
        uploadBox:upload
    },
    data(){
        return {  
            categoryList:[],          
            tableData:[],
            total:0,
            size:20,
            form: {},
            formEdit:{
                store_id:'',
                cover_image:'',
                cover_image_url:'ddddd',
                title:"",
                telephone:'',
                start_time:'',
                end_time:'',
                province:'111111111',
                city:'',
                area:'',
                address:'',
                longitude:'',
                first_step_percent:'',
                second_step_percent:'',
            },
            pageNum:1,//page
            defunltImg:'this.src="'+require('../../img/error.png')+'"',
            limitList:[]
        }
    },
    mounted(){
        var that = this;           
        that.geiCategory()//获取套餐分类
        abc.getList(that,url,that.form,changeList);
    },
    created(){
        var that = this;
        setTimeout(() => {
            var str = $('.router-link-active').attr('href');
            abc.limit(that,str)// 权限  
        }, 500)            
    },
    methods:{
        geiCategory(){
            var that = this;
            abc.get(that,potUrl.categoryList,{'cate_type': 2 },function(res){
                console.log('cat',res)
                that.categoryList = res.data
            })
        },
        search(){
            var that = this;
            abc.getList(that,url,that.form,changeList);
        },
        add(){

        },
        del(id){
            var that = this;
            console.log(id)
            that.$confirm('此操作将永久删除该套餐, 是否继续?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                abc.post(that,potUrl.DcomboDel,{combo_id:id},function () {
                    that.$message({
                        type: 'success',
                        message: '删除成功!',
                        duration:'1000'
                    });   
                })
                
            }).catch(() => {         
            });
        },
        theClick(id,url){
            var that = this;
            if(url == 'del'){
                that.del()
            }
            console.log(id,url)
            
        },   
        
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,url,that.form);
        }


    }
}

function  changeList(data) {
    $.each(data,function(i,item){
        // 是否含房时
        if(item.has_time == 1){
            item.has_time_cn = '是'
        }else if(item.has_time == 0){
            item.has_time_cn = '否'
        }else{
            item.has_time_cn='/'
        }
        // 平台属性显示
        item.platform_cn = ''
        if(item.platform.indexOf('0') != -1){
            item.platform_cn += '魅KTV<br />'
        }  
        if (item.meituan_type == 1) { //团购
            item.platform_cn += '美团团购<br />';
        } else if (item.meituan_type == 2) {
            item.platform_cn += '美团预订<br />';
        }

        if (item.koubei_type == 2) {
            item.platform_cn += '口碑预订<br />';
        } else if (item.koubei_type == 1) {
            item.platform_cn += '口碑团购';
        } 
        // 套餐明细
        item.combo_desc_cn=''
        var comboArray = item.combo_desc.split('+');
        for(var i = 0; i < comboArray.length; i++) {
            item.combo_desc_cn += '<p>' + comboArray[i] + '</p>'
        }
        // 套餐级别
        if(item.combo_cate == '1'){
            item.combo_cate_cn = 'L1';
        }else if(item.combo_cate == '2'){
            item.combo_cate_cn = 'L2';
        }else{
            item.combo_cate_cn = 'L3';
        }
        
    })
    console.log('aa',data)
}


</script>